<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新时代摄影</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        html{
            height: 100%;
            margin: 0;
        }
        body{
            height: 100%;
            font-size: 12px;
            display: flex;
            margin: 0;
            flex-direction: column;
        }
        .header{min-width: 100%;flex: 0 0 auto;height: 90px;background-color: #2e2e2e}
        .warp{width: 1280px;height: 85px;margin:0 auto;padding-top: 20px;}
        .lg_logo{float: left;padding: 0 15px 0 0}
        .lg_phone{float: right;margin: 30px 0 0;color: #ffffff;padding-right: 25px}
        .section{ flex: 1 0 auto;
            border-top: 1px solid #888888;
            padding: 60px 0 0 0;
            background-color: #f5fbfd
        }
        .fome {
            width: 525px;
            height: 100%;
            margin: auto;
            text-align: center;
            position: relative;
            padding-top: 90px;
        }
        .fome .logo {
            border-radius: 50%;
            width: 166px;
            height: 166px;
            opacity: 0.4;
            margin: auto;
            margin-left: 200px;
            overflow: hidden;
            box-shadow: 0px 2px 7px #000000;
            position: absolute;
            top: 0;
        }
        .logo>a{
            color: #333;
            text-decoration: none;
        }

        .fome form {
            background: #fff;
            border-radius: 5px;
            top: 10px;
            left: -20px;
            opacity: 0.7;
            position: relative;
            width: 500px;
            height: 300px;
            padding: 100px 55px 45px 55px;
        }
        form h3 {
            margin-bottom: 30px;
            font-weight: 500;
            color: #3c3c3c;
            font-size: 25px;
            text-align: center;
        }
        .l-form>input{
            padding: 10px 0;
            width: 300px;
            margin-bottom: 10px;
        }
        .l-form input{
            outline: none;
        }
        .f-div{
            width: 304px;
            height: 40px;
            margin-bottom: 10px;
            margin-left: 70px;
        }
        .a-img {
            width: 100px;
            height: 35px;
            border: 1px solid #e2e2e2;
            border-radius: 5px;
        }
        .s-input{
            height: 30px;
            width: 150px;
            margin-bottom: 10px;
        }
        .f-div-a{
            display: inline-block;
            width: 100px;
            text-decoration: none;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            background: #897d49;
            height: 35px;
            line-height: 35px;
            color: #fff;
            font-size: 12px;
        }
        footer{
            flex: 0 0 auto;
            min-width: 100%;
            background: #2e2e2e;
            padding: 40px 0;
            margin-top: 50px;
            color: #ffffff;
        }
        .f-container {
            width: 1280px;
            height: 350px;
            margin: auto;
            padding: 0;

        }
        .ftt{
            border-bottom: 1px solid #666666;
            width: 1280px;
            height: 320px;
            padding-left: 0;
        }
        footer .ftt .lianxi {
            width: 325px;
            margin-bottom: 45px;
            margin-right: 130px;
        }
        .fy{
            float: left;
        }
        .fr{
            float: right;
        }
        footer .ftt .lianxi h3 {
            margin-bottom: 20px;
            font-size: 16px;
            color: #fff;
            font-weight: 300;
            border-bottom: 1px solid #fff;
            padding-bottom: 5px;
        }
        .pc{
            border: 0;
            background-color: #2e2e2e;
            color: #ffffff;
            padding: 0;
        }
        footer .ftt .daohang {
            width: 340px;
        }
        footer .ftt .daohang h3 {
            margin-bottom: 20px;
            font-size: 16px;
            color: #fff;
            font-weight: 300;
            border-bottom: 1px solid #fff;
            padding-bottom: 5px;
        }
        footer .ftt .daohang li a {
            display: block;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            width: 100%;
        }
        .f-ul{
            padding: 0;
            list-style-type: none;
        }
        .f-ul>li{
            width: 85px;
            text-align: left;
            float: left;
            margin-bottom: 15px;
        }
        footer .ftt .erwei {
            width: 325px;
            margin-top: 20px;
            padding-top: 50px;
        }
        footer .ftt .erwei img:nth-of-type(1) {
            margin-right: 60px;
        }
        footer .ftt .erwei img {
            border-radius: 5px;
        }
        footer .footer-bottom {
            margin-top: 18px;
        }
        footer .footer-bottom p{
            text-align: center;
        }
        footer .footer-bottom p span {
            margin-left: 34px;
        }
        .contentBoxmain{
            background-image: url(http://www.shumasheying.org.cn/themes/index/public/assets/images/deng_bg.jpg);
            background-repeat: no-repeat;
            width: 1280px;
            height: 655px;
            margin: 0 auto;
            background-position-x: 70px;
            background-position-y: center;
        }






    </style>
</head>
<body>

<div class="header">
    <div class="warp">
        <span class="lg_logo">
           <img src="http://www.shumasheying.org.cn/themes/index/public/assets/images/logo.png" alt="春秋旅游网">
        </span>
        <span class="lg_phone">
            电  话：010-52638701  0372-3668876
        </span>
    </div>
</div>

<div class="section">
    <div class="contentBoxmain">
    <div class="fome">
        <div class="logo">
            <a href="/">
                <img src="http://www.shumasheying.org.cn/themes/index/public/assets/images/dlogo.jpg">
            </a>
        </div>
        <form class="l-form" action="">
            <input type="text"name="RegRhone" placeholder="请请输入手机号"><br>
            <div class="f-div">
                <div style="float: left;margin-left: 28px">
                    <input class="s-input" type="text" name="captcha" placeholder="请输入图片验证码">
                </div>
                <div style="float: right">
                    <a href="">
                        <img class="a-img" src="http://www.shumasheying.org.cn/captcha/new.html?height=38&width=160&font_size=20" alt="">
                    </a>
                </div>
            </div>
            <div class="f-div">
                <span style="margin-left: 15px">
                    <input class="s-input" type="text" name="captcha" placeholder="请输入短信验证码">
                </span>
                <span>
                    <a class="f-div-a" href="">获取短信验证码</a>
                </span>
            </div>
            <input type="text" name="verification_code" placeholder="请输入短信验证码"><br>
            <input type="password" name="password" placeholder="请输入新密码"><br>
            <input type="password" name="password" placeholder="再次确认新密码"><br>
            <input type="button" value="找回并即刻登录">
        </form>
    </div>
    </div>
</div>
<footer>
    <div class="f-container">
        <div class="ftt ">
            <div class="lianxi fy">
                <h3>联系我们</h3>
                <p>北京总部</p>
                <p>地  址：北京市石景山区阜石路166号泽洋大厦713室</p>
                <p>邮  编：100001</p>
                <!--<pre class="pc">电  话：010-52638701 010-52638749  0372-3668876</pre>-->
                <p>E-mail：xinshidaisheyingjia2018@aliyun.com</p>
                <p>安阳分社</p>
                <p>地  址：河南省安阳市万达广场SOHO公寓B座</p>

                <pre class="pc">电  话：0372-5023007  0372-3978876</pre>

            </div>
            <div class="daohang fy">
                <h3>网站导航</h3>
                <ul class="clearfix f-ul">
                    <li class="fl"><a href="/">首页</a></li>
                    <li class="fl"><a href="/activity.html">摄影赛事</a></li>
                    <li class="fl"><a href="/reflex.html">热门影展</a></li>
                    <li class="fl"><a href="/magazine.html">摄影杂志</a></li>
                    <li class="fl"><a href="http://www.sheyingyou.cn/">摄影旅游</a></li>
                    <li class="fl"><a href="/creation.html">用品超市</a></li>
                    <li class="fl"><a href="Javascript:;">资讯动态</a></li>
                    <li class="fl"><a href="Javascript:;">作品&amp;影展</a></li>
                    <li class="fl"><a href="Javascript:;">全国理事会</a></li>
                    <li class="fl"><a href="Javascript:;">会员服务</a></li>
                    <li class="fl"><a href="Javascript:;">关于我们</a></li>
                    <li class="fl"><a href="/sitemap.html">网站地图</a></li>
                </ul>
            </div>
            <div class="erwei fr">
                <img src="http://www.shumasheying.org.cn/upload/admin/20190424/934b656b7173258b84a6c0af2fd940da.jpg">
                <img src="http://www.shumasheying.org.cn/upload/admin/20190424/dabcf8c159d41ed632d0e89f46179016.jpg">
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <p>版权所有 Copyright © 2019 北京天之星文化传媒中心 All Rights Reserved <span>备案序号：<a href="https://beian.miit.gov.cn/" style="color:white;">京ICP备13014113号-4</a></span><span></span> </p>
            <ul class="clearfix">

            </ul>
        </div>
    </div>

    <div style="position: fixed; z-index: 99999; top: 20%; right: 20px;">
        <!-- <a href="http://www.shumasheying.org.cn/celebrity%20interview/977.html"> -->
        <a href="http://www.shumasheying.org.cn/creation.html">
            <img src="/themes/index/public/assets/images/right117.jpg" alt="">
        </a>
    </div>
    <div style="position: fixed; z-index: 99999; top: 20%; left: 20px;">
        <a href="http://www.shumasheying.org.cn/reflex/2440.html">
            <img src="/themes/index/public/assets/images/left117.jpg" alt="">
        </a>
    </div>
</footer>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios框架-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let vm = new Vue({
        el:"form",
        data:{},
        methods:{
            login:function () {
                let data = new FormData(document.querySelector("form"));
                axios.post("/login",data).then(function (response) {
                    if (response.data == 1) {
                        alert("登录成功!");
                        location.href = "/";
                    }else if (response.data == 2) {
                        alert("用户名不存在!");
                    }else {
                        alert("密码错误!")
                    }

                })

            }
        }
    })
</script>
</body>
</html>